<template>
	<div class="hotel-calendar">
		<div class="cover"></div>
		<div id="calendar">
			<!-- 年份 月份 -->
			<div class="month">
				<ul>
					<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
					<li class="arrow" @click="pickPre(currentYear,currentMonth)">《</li>
					<li class="year-month" @click="pickYear(currentYear,currentMonth)">
						<span class="choose-year">{{ currentYear }}-{{ currentMonth }}</span>
						<!-- <span class="choose-month"></span> -->
					</li>
					<li class="arrow" @click="pickNext(currentYear,currentMonth)">》</li>
				</ul>
			</div>
			<!-- 星期 -->
			<ul class="weekdays">
				<li>日</li>
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
				<li>六</li>

			</ul>
			<!-- 日期 -->
			<ul class="days">
				<!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
				<li v-for="(dayobject,index) in days" v-on:click="choose($event,index)" v-bind:class="{'start-date':dayobject.daystart,'end-date':dayobject.dayend,'startEnd':dayobject.startEnd}">
					<!--本月-->
					<!--如果不是本月  改变类名加灰色-->
					<div v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</div>

					<!--如果是本月  还需要判断是不是这一天-->
					<div v-else>
						<!--今天  同年同月同日-->
						<div v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
						 class="active"><span>{{ dayobject.day.getDate() }}</span></div> <!-- 当天日期-->
						 
						<div v-else-if="dayobject.day.getTime()<new Date().getTime()" class="other-month">{{ dayobject.day.getDate() }}</div><!-- 小于当天日期变灰不能点dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() < new Date().getDate()-->
						<div v-else>{{ dayobject.day.getDate()}}</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import getWeek from '../public/function.js'
	import {
		Confirm
	} from 'vux'
	export default {
		name: 'chooseData',
		components: {
			Confirm
		},
		props: {
			date: String,
		},
		data() {
			return {
				currentDay: 1,
				currentMonth: 1,
				currentYear: 1970,
				currentWeek: 1,
				days: [],
				clickData: '',
				startEnd:[],
				datas:''
			}
		},
		created: function() { //在vue初始化时调用
			this.initData(null);
			// console.log(this.date);
		},
		methods: {
			initData: function(cur) {
				var leftcount = 0; //存放剩余数量
				var date;
				if (cur) {
					date = new Date(cur);
				} else {
					var now = new Date();
					var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
					d.setDate(35);
					date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
				}
				this.currentDay = date.getDate();
				this.currentYear = date.getFullYear();
				this.currentMonth = date.getMonth() + 1;
				this.currentWeek = date.getDay(); // 1...6,0
				if (this.currentWeek == 0) {
					this.currentWeek = 7;
				}
				var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
				this.days.length = 0;
				// 今天是周日，放在第一行第7个位置，前面6个
				//初始化本周
				//console.log(this.currentWeek)// 控制第一天的位置()
				for (var i = this.currentWeek; i >= 0; i--) {
					var d = new Date(str);
					d.setDate(d.getDate() - i);
					var dayobject = {}; //用一个对象包装Date对象  以便为以后预定功能添加属性
					dayobject.day = d;
					dayobject.daystart = false;
					dayobject.dayend = false;
					dayobject.startEnd = false;
					this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
				}
				// 				for(var i=0;i<this.days.length;i++){
				// 					console.log(this.days[i].day.getMonth())
				// 				}
				//其他周
				for (var i = 1; i <= 35 - this.currentWeek-1; i++) {
					var d = new Date(str);
					d.setDate(d.getDate() + i);
					var dayobject = {};
					dayobject.day = d;
					dayobject.daystart = false;
					dayobject.dayend = false;
					dayobject.startEnd = false;
					this.days.push(dayobject);
				}

			},
			pickPre: function(year, month) {
				console.log(this.startEnd)
				// setDate(0); 上月最后一天
				// setDate(-1); 上月倒数第二天
				// setDate(dx) 参数dx为 上月最后一天的前后dx天
				var d = new Date(this.formatDate(year, month, 1));
				d.setDate(0);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			pickNext: function(year, month) {
				console.log(this.startEnd)
				console.log(this.startEnd)
				var d = new Date(this.formatDate(year, month, 1));
				d.setDate(35);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			pickYear: function(year, month) {
				alert(year + "," + month);
			},
			// 返回 类似 2016-01-02 格式的字符串
			formatDate: function(year, month, day) {
				var y = year;
				var m = month;
				if (m < 10) m = "0" + m;
				var d = day;
				if (d < 10) d = "0" + d;
				return y + "-" + m + "-" + d
			},
			//
			choose: function(e,index) {
				var that = this;
				var nowYear = new Date().getFullYear() //当前时间年
				var nowMonth = new Date().getMonth() + 1 //当前时间月
				var nowDate = new Date().getDate() //当前时间日
				var nowData = nowYear + '-' + nowMonth + '-' + nowDate
				var nowData1 = nowData.replace(/-/g, '/').replace(/\./g, '/') ////兼容ios的时间格式处理 ios不认   /或者.
				var nowData1 = new Date(nowData1).getTime() //将时间变成时间戳
					
				var clickYear = that.currentYear //点击年份
				var clickMonth = that.currentMonth //点击月份
				var clickDay = e.path[0].innerHTML //点击日
				var str = clickYear + '-' + clickMonth + '-' + clickDay
				var str = str.replace(/-/g, '/').replace(/\./g, '/') ////兼容ios的时间格式处理 ios不认   /或者.
				var clickData = new Date(str).getTime() //将时间变成时间戳
				that.clickData = str;

				var str1 = getWeek.getWeek(str).week;
				
				//时间范围选择开始
				if(this.startEnd.length==0){//开始样式
					this.startEnd.push(str)
					this.days[index].daystart = true;
					
				}else if(this.startEnd.length==1){//结束样式
					var oldtime = this.startEnd[0].split('/')
					var newtime = str.split('/');
					console.log('1标记'+oldtime[2])
					console.log('2标记'+newtime[2])
					if(newtime[2]>oldtime[2]){//结束日期大于开始日期添加
						this.startEnd.push(str);
						this.days[index].dayend = true;
						//开始结束中间添加样式
						this.dotline(oldtime[2],newtime[2]);
						console.log('开始样式2-1')
					}else{//结束日期小于开始日期重新赋值
						this.startEnd= [];
						this.startEnd.push(str)
						this.days.forEach(item=>{
							item.daystart = false;
							item.dayend = false;
						})
						this.days[index].daystart = true;
						console.log('开始样式2-2')
					}
				}else if(this.startEnd.length==2){
					this.startEnd= [];
					this.startEnd.push(str)
					this.days.forEach(item=>{
						item.daystart = false;
						item.dayend = false;
						item.startEnd = false;
					})
					this.days[index].daystart = true;
					console.log('开始样式3')
				}
				//时间范围选择结束
				var str1 = str + str1 //将日期星期传到富组件
				// this.$parent.chooseDay(str);  接收富组件的方法
				if (Number(clickData) < Number(nowData1)) {
					// console.log(1)
					return
				} else {
					that.$parent.chooseDay(str1);
				}

			},
			dotline(arr1,arr2){
				for (var i=parseInt(arr1)+1;i<arr2;i++) {
					this.days[i].startEnd = true;
				}
			}
		},
		
	}
</script>

<style scoped>
.hotel-calendar{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0,0,0,.5);
}
#calendar{
	width: 671px;
	height: 931px;
	background-color: #ffffff;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 10px;
}
/* //月 */
.month{
	padding-top: 39px;
	text-align: center;
	padding-bottom: 55px;
}
.month ul{
	display: flex;
}
.month ul li{
	flex: 1;
	font-family: MicrosoftYaHei;
	font-size: 33px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #444444;
}
/* //周 */
.weekdays{
	display: flex;
}
.weekdays li{
	flex: 1;
	text-align:  center;
	font-family: MicrosoftYaHei;
	font-size: 32px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 2px;
	color: #3bc3c2;
	padding-bottom: 49px;
}
/* //天 */
.days li{
	width: 14.28%;
	float: left;
	text-align: center;
	margin-bottom: 62px;
	height: 56px;
	line-height: 56px;
	font-family: MicrosoftYaHei;
	font-size: 32px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #444444;
}
.days li.start-date div div{
	width: 56px;
	height: 56px;
	background:#3bc3c2;
	color: #fff;
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	position: relative;
}
.days li{
	position: relative;
}
.days li.start-date:after{
	background: rgba(59, 195, 194,0.5);
	display: block;
	border-bottom-left-radius: 56px;
	border-top-left-radius: 56px;
	content: "";
	display: inline-block;
	width: 56px;
	height: 56px;
	right: 0;
	top: 0;
	position: absolute;
	z-index: -1;
}
.days li.startEnd{
	background: rgba(59, 195, 194,0.5);
}
.days li.end-date:before{
	background: rgba(59, 195, 194,0.5);
	display: block;
	border-bottom-right-radius: 56px;
	border-top-right-radius: 56px;
	content: "";
	display: inline-block;
	width: 56px;
	height: 56px;
	left: 0;
	position: absolute;
	z-index: -1;
}
.days li.end-date div div{
	width: 56px;
	height: 56px;
	background:#3bc3c2;
	color: #fff;
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	position: relative;
}
.days li.start-date div div:after{
	position: absolute;
	width: 56px;
	height: 56px;
	content: '入住';
	display: block;
	font-family: MicrosoftYaHei;
	font-size: 26px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #444444;
}
.days li.end-date div div:after{
	position: absolute;
	width: 56px;
	height: 56px;
	content: '离店';
	display: block;
	font-family: MicrosoftYaHei;
	font-size: 26px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #444444;
}
.active span{
	width: 56px;
	height: 56px;
	background:#3bc3c2;
	color: #fff;
	display: block;
	margin: 0 auto;
	border-radius: 50%;
}
.days li .other-month{
	font-family: MicrosoftYaHei;
	font-size: 32px;
	font-weight: normal;
	font-stretch: normal;
	color: #8a8a8a;
}
</style>
